<template>
  <app-card title="研判统计">
    <div class="stat">
      <div class="item" v-for="(item, index) in infos">
        <div class="item-value" :style="{ color: item.color }">{{ item.value }}</div>
        <div class="item-label">{{ item.label }}</div>
      </div>
    </div>
  </app-card>
</template>
<script setup>
import http, { post } from '@/utils/http'
import attack from '@/data/attack.json'
import { color } from 'echarts'

const props = defineProps({
  data: Object,
})

const data = ref({
  0: 0, // 未研判
  1: 0, // 正常行为
  2: 0, // 攻击行为
})

// 1+2等于已研判

const infos = computed(() => {
  return [
    { label: '已研判', value: data.value[1] + data.value[2], color: '#4361EE' },
    { label: '未研判', value: data.value[0], color: '#F8961E' },
    { label: '攻击行为', value: data.value[2], color: '#F72585' },
    { label: '正常行为', value: data.value[1], color: '#4CC9F0' },
  ]
})

http({
  url: '/hids/alert/assessment/search',
}).then(res => {
  res.map(item => {
    data.value[item.assessment_status] = item.count
  })
})
</script>
<style lang="scss" scoped>
.stat {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  .item {
    display: flex;
    flex-direction: column;
    padding: 30px 0;
    background-color: #f8f9fa;
    text-align: center;
    border-radius: 4px;
  }

  .item-label {
    color: #6c757d;
    font-weight: 500;
  }

  .item-value {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 5px;
  }
}
</style>
